<template>
  <div class="units-management">
    <actions-box :searchForm="[
      { key: 'name', label: '单位名称' }
    ]" :needImportExport="false" @submitSearchRequest="submitSearchRequest" @addItem="showDialog"
      @batchDelete="batchDelete" ref="child">
    </actions-box>


    <el-table ref="multipleTable" :data="InfoTable" tooltip-effect="dark" style="width: 100%; margin-top: 20px" border
      stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" fixed align="center"></el-table-column>

      <el-table-column label="序号" align="center" type="index" :index="indexAdd" width="60">
      </el-table-column>

      <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>

      <el-table-column prop="unitsPeoples" width="73" label="单位人数" sortable align="center">
      </el-table-column>

      <el-table-column prop="telephone" width="110" label="联系方式" align="center">
      </el-table-column>

      <el-table-column prop="address" width="280" label="地址" align="center">
      </el-table-column>

      <el-table-column prop="icon" width="170" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showInfo(scope.row)">详情</el-button>
          <el-divider direction="vertical"></el-divider>

          <el-button type="text" @click="editInfo(scope.row)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>

          <template>
            <el-popconfirm title="确定单位删除吗？" @confirm="delHandle(scope.row)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :current-page="current"
      :page-size="size" :total="total">
    </el-pagination>

    <!-- 对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
      <el-form :model="currentInfo" ref="editForm" size="small">
        <el-form-item label="名称" prop="name" label-width="100px">
          <el-input v-model="currentInfo.name" autocomplete="off" :disabled="!isEditable"></el-input>
        </el-form-item>

        <el-form-item label="单位人数" prop="unitsPeoples" label-width="100px">
          <el-input v-model="currentInfo.unitsPeoples" autocomplete="off" :disabled="!isEditable"></el-input>
        </el-form-item>

        <el-form-item label="联系方式" prop="telephone" label-width="100px">
          <el-input v-model="currentInfo.telephone" autocomplete="off" :disabled="!isEditable"></el-input>
        </el-form-item>

        <el-form-item label="地址" prop="address" label-width="100px">
          <el-input v-model="currentInfo.address" autocomplete="off" :disabled="!isEditable"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="isEditable">
        <el-button @click="resetForm('editForm')">取 消</el-button>
        <el-button type="primary" @click="submitDialog('editForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ActionsBox from '../Needtest/subcomps/ActionsBox.vue';
  export default {
    components: { ActionsBox },
    name: "UnitsManagement",
    data() {
      return {
        InfoTable: [
          {
            name: '赣南医学院(黄金校区)',
            unitsPeoples: 1500,
            telephone: '18317910068',
            address: '赣州市xxxxxxx'
          },
          {
            name: '赣南医学院(白银校区)',
            unitsPeoples: 1400,
            telephone: '13317910068',
            address: '赣州市xxxxxxx'
          },
          {
            name: '赣南医学院(青铜校区)',
            unitsPeoples: 1200,
            telephone: '14317910028',
            address: '赣州市xxxxxxx'
          },
        ],

        multipleSelection: [],

        total: 3, // 总条目数
        size: 10, // 每页表格显示的条数
        current: 1, // 当前页码

        dialogVisible: false, // 新增对话框是否显示

        currentInfo: {},  // 选择的行的信息
        needShowInfo: false, // 是否需要将信息展示到dialog
        isEditable: true, // 是否可编辑dialog
      }
    },
    cerated() {
      
    },
    methods: {
      // 勾选后触发
      handleSelectionChange(val) {
        console.log("勾选项：", val);
        // 获取所有勾选项
        this.multipleSelection = val;

        this.delBtlStatu = val.length == 0;
        this.$refs.child.delBtlStatu = this.delBtlStatu;
        console.log(this.$refs.child.delBtlStatu)
      },

      // 实现表格序号自增
      indexAdd(index) {
        return index + 1 + (this.current - 1) * this.size;
      },

      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.current = val
        this.getUserList()
      },

      // 获取当前页信息
      getUserList() {
        this.$axios.get(`/gmu/tbl-student/pageStudent/${this.current}/${this.size}`).then(res => {
          // this.tableData = res.data.data.records
          // this.size = res.data.data.size
          // this.current = res.data.data.current
          // this.total = res.data.data.total
          console.log('学生信息：',res);
          this.total = res.data.data.total;
          this.InfoTable = res.data.data.rows;
        })
      },

      // params即为子组件传递过来的值
      submitSearchRequest(params) {
        // 发送搜索的请求
        // ......
        this.$axios.get(`/gmu/tbl-user/getTblSampleByCondition/${params.name}/${params.telephone}/${params.idNumber}`).then(res => {
          console.log('搜索结果：', res);
        }).catch(err => {
          console.log('搜索失败：', err);
        })
        console.log('params: ', params);
      },
      // 展示‘新增’对话框
      showDialog() {
        this.dialogVisible = true;
      },
      // 批量删除单位
      batchDelete() {
        const userIds = this.multipleSelection.map(val => {
          return val.userId;
        })
        this.$axios.delete(`/gmu/tbl-user/deleteUserByIds/${userIds.toString()}`).then(res => {
          this.getUserList();
          this.$message({
            message: "删除成功",
            type: "success"
          })
        }).catch(err => {
          console.log("批量删除用户：", err);
        })
      },

      // 编辑单位信息
      editInfo(info) {
        this.needShowInfo = true;
        this.isEditable = true;
        this.showDialog();
        this.currentInfo = JSON.parse(JSON.stringify(info));
      },
      // 展示单位信息
      showInfo(info) {
        console.log("info: ", info);
        this.needShowInfo = true;
        this.isEditable = false;
        this.showDialog();
        this.currentInfo = JSON.parse(JSON.stringify(info));
      },
      // 删除单位
      delHandle(info) {
        this.$axios.delete("/gmu/tbl-student/deleteStudent/" + info.studentId).then(res => {
          this.getUserList();
          this.$message({
            message: "删除成功",
            type: "success"
          })
        }).catch(err => {
          console.log("删除用户：", err);
        })
      },
      
      // 提交表单
      submitDialog(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const form = {}
            const url = this.needShowInfo ? '/gmu/tbl-user/update' : '/gmu/tbl-user/add';
            this.$axios.post(url, form)
              .then(res => {
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.resetForm('editForm');
                  }
                });
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 重置对话框内容
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogVisible = false;
        this.currentInfo = {};
      },
      handleClose() {
        this.resetForm('editForm')
      },
    }
  }
</script>

<style scoped>
</style>